<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    $(document).ready(function(){
       var ajaxLoading = false ;
       $('#createNewUsername').blur(function() {

                      if ($(this).val().length>=5) {
                            var username= $(this).val();

                                $.ajax({
                                      url:'checkUsername.action',
                                      data:"userName="+username,
                                      type:'POST',
                                      dataType:'json' ,
                                           success:function(data){

                                               if(data.result!=""){
                                                   if(data.result=="login"){
                                                         window.location.href = 'main.action';
                                                    }else{
                                                       $("#validUsername").text(data.result);
                                                       $("input[name='isNormal']").val(false);
                                                   }
                                               }else{
                                                  var ok="<img src='images/ok/ok.png' width='16' height='16' />"  ;
                                                  $("#validUsername").html(ok);
                                               }
                                             }
                                });

                       }  else{
                          $("#validUsername").html("");
                          $("#validUsername").text("Input more than 5 letters!");
                          $("input[name='isNormal']").val(false);
                      }
       });

       $("#createNewPassword").blur(function(){
               var newPass=$("#createNewPassword").val();
                 if(newPass.length>0){
                         if(newPass.length>=5){
                                  var ok="<img src='images/ok/ok.png' width='16' height='16' />"  ;
                                  $("#validNewPassword").html(ok);
                                  $("input[name='isNormalPassword']").val(1);
                         }else{
                              $("#validNewPassword").text("Less than 5 letter!");
                              $("input[name='isNormalPassword']").val(0);
                         }
                       } else{
                          $("#validNewPassword").text("Insert the new password!");
                           $("input[name='isNormalPassword']").val(0);
                       }


       });

       $("#confirmNewPassword").blur(function(){
               var newPass=$("#createNewPassword").val();
               var cnfPass=$("#confirmNewPassword").val();
             if(cnfPass.length>0){
                 if(newPass==cnfPass){
                              var ok="<img src='images/ok/ok.png' width='16' height='16' />"  ;
                              $("#validCnfPassword1").html(ok);
                              $("input[name='isNormalPassword']").val(1);

                  }else{
                             $("#validCnfPassword1").text("Confirm new password!");
                              $("input[name='isNormalPassword']").val(0);
                  }
             }  else{
                  $("input[name='isNormalPassword']").val(0);
                  $("#validCnfPassword1").text("");
             }

       });

       $("#saveNewPassword").click(function(){
              if(!ajaxLoading){
                   ajaxLoading=true;
                   var isNormal= $("input[name='isNormalPassword']").val();
                   if(isNormal==1){

                       var newUsername=$("#createNewUsername").val();
                       var newPassword= $("#createNewPassword").val();
                       var cnfPassword=$("#confirmNewPassword").val();
                       if(newUsername=='' || newPassword=='' || cnfPassword=='') {
                                alert("Please input all fields!!!");

                       }else{
                               var email = $("input[name='email']").val();
                               var uniqueKey = $("input[name='uniqueKey']").val();
                                    $.ajax({
                                                     url:'savePassword.action',
                                                     data:{
                                                           newUsername: newUsername,
                                                           newPassword: newPassword,
                                                           email: email,
                                                           uniqueKey: uniqueKey
                                                          },
                                                     type:'POST',
                                                          success:function(data){
                                                               if(data=='success'){
                                                                     $("#createNewUsername").val("");
                                                                             $("#validUsername").text("");
                                                                             $("#validUsername").html("");
                                                                        $("#createNewPassword").val("");
                                                                             $("#validNewPassword").text("");
                                                                             $("#validNewPassword").html("");
                                                                        $("#confirmNewPassword").val("");
                                                                             $("#validCnfPassword1").text("");
                                                                             $("#validCnfPassword1").html("");
                                                                         alert("Changes has been completed successfully!") ;
                                                                        window.location.href="login.action?login="+newUsername+"&password="+newPassword;
                                                                }else if(data=='error'){
                                                                       $("#append").append("error occurred");
                                                               }else{
                                                                   alert(data);
                                                               }

                                                            }
                                                 });
                       }

                   }      else{
                       alert("Sorry , but your password can't be changed! There are some incorrect data.");

                   }
                ajaxLoading = false ;
              }
         })
     })

</script>
<style type="text/css">
    #change{
       margin-left:150px;
       padding-left: 180px;
       width: 600px;
       border: 0px solid #d3d3d3;
       padding-top:80px;
       height: 300px;
    }
    #savingPassword{
       padding-top: 30px;
       width: 600px;
       padding-left: 75px;
    }
    .eachRow{
       width: 600px!important;
    }
    .eachRowLabel{
       width: 200px;
       text-align: center;
    }
    #validUsername,#validNewPassword,#validCnfPassword1{
       color: red;
    }
</style>
<div id="change">

       <div class="eachRow">
          <div class="eachRowLabel"> Username: </div>
          <input  type="text" name="createNewUsername" id="createNewUsername" value="" class="toStyle"/>
          <span id="validUsername"></span>
       </div>

       <div class="eachRow">
          <div class="eachRowLabel"> New password: </div>
          <input  type="password" name="createNewPassword" id="createNewPassword" value="" class="toStyle"/>
          <span id="validNewPassword"></span>
       </div>

       <div class="eachRow">
           <div class="eachRowLabel">Confirm New password: </div>
           <input  type="password" name="confirmNewPassword" id="confirmNewPassword" value="" class="toStyle"/>
           <span id="validCnfPassword1"></span>
       </div>

       <input type ="hidden" name="isNormalPassword" value="1"/>
       <input type ="hidden" name="email" value="<s:property value="email"/>" />
       <input type ="hidden" name="uniqueKey" value="<s:property value="uniqueKey"/>"/>

       <div id="savingPassword">
            <input type ="button" value="Save" id="saveNewPassword"/>
       </div>
    <div id="append"></div>
</div>